<template>
  <div>
    <div style="display: flex; flex-direction: row;">
      <!-- <songCard v-for="item in songs1" :songName="item" :key="item" singer="周杰伦" albumName="八度空间" albumId="1" @goToMusic="goToMusic"></songCard>
      <songCard v-for="item in songs2" :songName="item" :key="item" singer="周杰伦" albumName="范特西" albumId="2" @goToMusic="goToMusic"></songCard> -->
      
      <div style="width: 50%; margin-left: 80px;" v-if="songs.length">
        <songCard v-for="item in songs.slice(0, 5)" 
        :songName="item.name" :key="item.songid"
        :songId="item.songid"
        :singer="item.singername"
        :albumName="item.albumname"
        :albumId="item.albumid"
        @goToMusic="goToMusic" @likeMusic="likeMusic" @playMusic="playMusic"></songCard>
      </div>
      <div style="width: 50%;">
        <songCard v-for="item in songs.slice(5, 10)" 
        :songName="item.name" :key="item.songid"
        :songId="item.songid"
        :singer="item.singername"
        :albumName="item.albumname"
        :albumId="item.albumid"
        @goToMusic="goToMusic" @likeMusic="likeMusic" @playMusic="playMusic"></songCard>
      </div>
    </div>
    <div style="width: 100%; text-align: center; font-size: 30px;">
      <!-- <h1 style="color: #a8abb2"> Welcome To My Music App</h1> -->
    </div>
  </div>
  
</template>

<script>
import songCard from '../components/songCard.vue';
import axios from 'axios';

export default {
  name: 'home',
  components: {
    songCard
  },
  data() {
    return {
      songs: []
    }
  },
  mounted() {
    axios({
        method: 'get',
        url: '/api/getRandomSongs'
      }).then((res) => {
        this.$nextTick(() => {
          this.songs = res.data.data
        })
      })
  },
  methods: {
    goToMusic(songId, albumId) {
      this.$emit('goToMusic', songId, albumId)
    },
    likeMusic(songId) {
      this.$emit('handleLikeMusic', songId)
    },
    playMusic(songId) {
      console.log('handlePlay', songId)
      this.$emit('handlePlayMusic', songId)
    }
  }
}
</script>

<style scope>

</style>